<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery特效制作复选框,全选,反选,取消,购物车，统计价格，统计，淘宝</title>

<link href="css/index.css" rel="stylesheet" type="text/css" />
<style>
table .web0225 input {width: 80px; height: 25px; float: left; border-radius: 15px; background: red; margin-bottom: 5px;color: #fff; cursor: pointer;}
table .web0225 input:hover {color: yellow}
</style>  


</head>
<body>

<div class="gwc" style=" margin:auto;">
    <table cellpadding="0" cellspacing="0" class="gwc_tb1">
        <tr>
            <td class="tb1_td1"><input type="checkbox"  id="allselect" /></td>
            <td class="tb1_td1">全选</td>
            <td class="tb1_td3">商品</td>
            <td class="tb1_td4">商品信息</td>
            <td class="tb1_td5">数量</td>
            <td class="tb1_td6">单价</td>
            <td class="tb1_td7">操作</td>
        </tr>
    </table>
    
    <table cellpadding="0" cellspacing="0" class="gwc_tb2">
        <tr>
            <td class="tb2_td1">
                <input class="goodsInput" type="checkbox" value="1" name="newslist" id="newslist-1" />
            </td>
            <td class="tb2_td2"><a href="#"><img src="images/img1.jpg"/></a></td>
            <td class="tb2_td3"><a href="#">产品标题</a></td>
            <td class="tb1_td4">一件</td>
            <td class="tb1_td5">
                <input class="min" name=""  style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
                <input class="goods_num" name="" type="text" value="1" style=" width:30px; text-align:center; border:1px solid #ccc;" />
                <input class="add" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
            </td>
            <td class="tb1_td6"><label id="total1" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;">1.65</label></td>
            <td class="tb1_td7"><a href="javascript:void(0);" class="del">删除</a></td>
        </tr>
        <tr>
            <td class="tb2_td1">
                <input type="checkbox" class="goodsInput"  value="1" name="newslist" id="newslist-2" />
            </td>
            <td class="tb2_td2"><a href="#"><img src="images/img2.jpg"/></a></td>
            <td class="tb2_td3"><a href="#">产品标题</a></td>
            <td class="tb1_td4">一件</td>
            <td class="tb1_td5">
                <input class="min" name=""  style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
                <input class="goods_num" name="" type="text" value="1" style=" width:30px; text-align:center; border:1px solid #ccc;" />
                <input class="add" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
            </td>
            <td class="tb1_td6"><label id="total2" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;">1.65</label></td>
            <td class="tb1_td7"><a href="javascript:void(0);" class="del">删除</a></td>
        </tr>
    </table>
    
    <table cellpadding="0" cellspacing="0" class="gwc_tb3">
        <tr>
            <td class="tb1_td1 web0225">
                <input type="button" value="添加商品" id='addGoods'/>
                <input type="button" value="复选框反选" id='fanselect' />
            </td>
            <td class="tb1_td1">&nbsp;</td>
            <td class="tb3_td1">&nbsp;</td>
            <td class="tb3_td2">已选商品 <label id="shuliang" style="color:#ff5500;font-size:14px; font-weight:bold;">0</label> 件</td>
            <td class="tb3_td3">合计(不含运费):<span>￥</span><span style=" color:#ff5500;"><label id="zong1" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></span></td>
            <td class="tb3_td4"><span id="jz1">结算</span><a href="#" style=" display:none;"  class="jz2" id="jz2">结算</a></td>
        </tr>
    </table>

</div>

<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
<script>
    // 全选全不选
    $("#allselect").click(function(){
        let status = $(this).prop('checked')
        $('.goodsInput').prop('checked',status)
        totalFn()
    })
    // 反选
    // 获取反选框按钮  绑定点击
    $("#fanselect").click(function(){
        // 遍历
        $('.goodsInput').each((i,item)=>{
            // item 每个商品勾选框框js标签对象，获取item对象
            let status = $(item).prop('checked')
            // 取反
            $(item).prop('checked',!status)
            totalFn()
        })
    })

    // 添加商品
    // 获取添加按钮，绑定事件
    $('#addGoods').click(function(){
        // 事件函数处理中，追加标签  用模板字符串拼接
        $('table:eq(1) tbody').append(` <tr>
            <td class="tb2_td1">
                <input type="checkbox" class="goodsInput"  value="1" name="newslist" id="newslist-2" />
            </td>
            <td class="tb2_td2"><a href="#"><img src="images/img2.jpg"/></a></td>
            <td class="tb2_td3"><a href="#">产品标题</a></td>
            <td class="tb1_td4">一件</td>
            <td class="tb1_td5">
                <input class="min" name=""  style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
                <input class="goods_num" name="" type="text" value="1" style=" width:30px; text-align:center; border:1px solid #ccc;" />
                <input class="add" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
            </td>
            <td class="tb1_td6"><label id="total2" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;">1.65</label></td>
            <td class="tb1_td7"><a href="javascript:void(0);" class="del">删除</a></td>
        </tr>`)
       
    })

    // 删除商品
    // 事件委托，给父元素tbody绑定事件
     // 事件处理函数中，移除当前行
    $('table:eq(1) tbody').on('click','.del',function(){
        $(this).parents('tr').remove()
        totalFn()
    })

    // 商品加1
    // 事件委托，祖先 tbody  子 .add
    // 事件处理函数中：核心input数据+1
        // 获取input框数据
        // ++  注意：+1存在类型转换  ++直接隐式转换
        // 将最新的数据放到页面中
    $('table:eq(1) tbody').on('click','.add',function(){
        let num = $(this).prev().val()
        num++
        $(this).prev().val(num)
        totalFn()
    })

    // 商品减1
    // 事件委托，祖先 tbody  子 .add
    // 事件处理函数中：核心input数据-1
    // 获取后一个input框数据
    // --
    // 将最新的数据放到页面中
    $('table:eq(1) tbody').on('click','.min',function(){
        let num = $(this).next().val()
        num--
        if(num<1) num=1
        $(this).next().val(num)
        totalFn()
    })
    
    // 添加input事件 
    // 添加事件委托，祖先，tbody， 子 .goods_num
    // 事件函数处理中
    // 先获取其数据
    // 过滤
    // 同步数据到页面
    $('table:eq(1) tbody').on('input','.goods_num',function(){
        let num = $(this).val()
        num = String(num).replace(/\D/g, '')
        if(num<1) num = 1
        $(this).val(num)
        totalFn()
    })

 

   function totalFn(){
       // total  累计
    // 定义变量 totalNum  totalPrice
    // 获取所有勾选的商品框框，遍历
    // item就是input：checkbox勾选框  找find子单价
    // 累计 ，最终放到页面中
    let totalNum = 0
    let totalPrice = 0
   $('.goodsInput:checked').each((i,item)=>{
    let num = $(item).parents('tr').find('.goods_num').val()
    let price = $(item).parents('tr').find('.tot').text()
    
    totalNum += parseInt(num)  //转换为num
    totalPrice += parseInt(num) * parseFloat(price)
   })

   $('#shuliang').text(totalNum)
   $('#zong1').text(totalPrice)
   }
   totalFn()


</script>

</body>
</html>
